<template>
    <div id = "menu-options">
      <option-text v-ref:optiontext v-show = "optitonType === 'text'"
      :option-obj = "optionObj" :option-val.sync = "optionText">
      </option-text>

      <option-number v-ref:optionnumber v-show = "optitonType === 'number'"
      :option-obj = "optionObj" :option-val.sync = "optionNum">
      </option-number>

      <option-zone v-ref:optionzone v-show = "optitonType === 'zone'"
      :option-obj = "optionObj" :option-val.sync = "optionZone">
      </option-zone>

      <option-data v-ref:optiondata v-show = "optitonType === 'date'"
      :option-obj = "optionObj" :option-val.sync = "optionData"
      :is-show-option.sync = "isShowOption">
      </option-data>

      <option-time v-ref:optiontime v-show = "optitonType === 'time'"
      :option-obj = "optionObj" :option-val.sync = "optionTime"
      :is-show-option.sync = "isShowOption">
      </option-time>

      <option-info v-ref:optionInfo v-show = "optitonType === 'information'">
      </option-info>

      <option-dual-number v-ref:dualnumber v-show = "optitonType === 'dualNumber'"
      :option-obj.sync = "optionObj" :option-title.sync = "optionTitle"
      :is-show-option.sync = "isShowOption">
      </option-dual-number>

      <option-range v-ref:range  v-show = "optitonType === 'range'"
      :range-obj.sync = "optionRange" :index = "rangeIndex">
      </option-range>
    </div>
</template>

<script>
  import * as optionText from './option-text.vue'
  import * as optionNumber from './option-number.vue'
  import * as optionZone from './option-zone.vue'
  import * as optionData from './option-data.vue'
  import * as optionTime from './option-time.vue'
  import * as optionInfo from './option-info.vue'
  import * as optionDualNumber from './option-dual-number.vue'
  import * as optionRange from './option-range.vue'

  export default {
    components: {
      optionText,
      optionNumber,
      optionZone,
      optionData,
      optionTime,
      optionInfo,
      optionDualNumber,
      optionRange
    },
    computed: {
      isRange: function () {
        let _obj = this.optionRange[this.rangeIndex]
        if (_obj === undefined) {
          return
        }
        if (_obj.type === 'range') {
          return true
        } else {
          return false
        }
      }
    },
    data () {
      return {
        optitonType: '',
        optionText: '',  //  选项操作的结果
        optionNum: 0,
        optionZone: '',
        optionData: '',
        optionTime: '',
        optionObj: {},    //  存放选项可选内容
        optionRange: [],
        rangeIndex: 0,
        optionTitle: ''
      }
    },
    props: {
      isShowOption: {
        type: Boolean,
        twoWay: true
      }
    },
    ready () {
      let _this = this

      this.Up = function () {
        if (this.optionObj.type === 'text') {
          _this.$refs.optiontext.decSelection()
        } else if (this.optionObj.type === 'number') {
          _this.$refs.optionnumber.incSelection()
        } else if (this.optionObj.type === 'zone') {
          _this.$refs.optionzone.incVal()
        } else if (this.optionObj.type === 'date') {
          _this.$refs.optiondata.incVal()
        } else if (this.optionObj.type === 'time') {
          _this.$refs.optiontime.up()
        } else if (this.optionObj.type === 'dualNumber') {
          _this.$refs.dualnumber.Up()
        }
        if (this.optionRange.length > 0) {
          if (this.optionRange[0].type === 'range') {
            _this.$refs.range.Up()
          }
        }
      }

      this.Down = function () {
        if (this.optionObj.type === 'text') {
          _this.$refs.optiontext.incSelection()
        } else if (this.optionObj.type === 'number') {
          _this.$refs.optionnumber.decSelection()
        } else if (this.optionObj.type === 'zone') {
          _this.$refs.optionzone.decVal()
        } else if (this.optionObj.type === 'date') {
          _this.$refs.optiondata.decVal()
        } else if (this.optionObj.type === 'time') {
          _this.$refs.optiontime.Down()
        } else if (this.optionObj.type === 'dualNumber') {
          _this.$refs.dualnumber.Down()
        }
        if (this.optionRange.length > 0) {
          if (this.optionRange[0].type === 'range') {
            _this.$refs.range.Down()
          }
        }
      }

      this.Left = function () {
        if (this.optionObj.type === 'dualNumber') {
          _this.$refs.dualnumber.getLeft()
        } else if (this.optionObj.type === 'date') {
          _this.$refs.optiondata.back()
        } else if (this.optionObj.type === 'time') {
          _this.$refs.optiontime.left()
        }
      }

      this.Right = function () {
        if (this.optionObj.type === 'dualNumber') {
          _this.$refs.dualnumber.getRight()
        } else if (this.optionObj.type === 'date') {
          _this.$refs.optiondata.forward()
        } else if (this.optionObj.type === 'time') {
          _this.$refs.optiontime.right()
        }
      }

      this.Enter = function () {
        if (this.optionObj.type === 'text') {
          return this.optionText
        } else if (this.optionObj.type === 'number') {
          return this.optionNum
        }
      }
    }
  }
</script>

<style>
  #menu-options {
    color: black;
  }
</style>
